import React, { Component } from 'react';

import {
  StyleSheet, View, TouchableWithoutFeedback, Text, ScrollView,
} from 'react-native';
import ZlstIcon from '../../../../components/zlst-icons';
import ListItemImage from './list-item-image';
import Theme from '../../../../native-base-theme/variables/commonColor';

class ListItem extends Component {
  componentDidMount() {

  }

  render() {
    const { item } = this.props;
    // const data = {
    //   name: item.materialName, packageUnit: item.packageUnit, consumeQty: item.consumeQty, showImage: item.photos,
    // };

    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={() => this.props.onItemClick(item)}>
          <View style={styles.title_container}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <Text style={styles.title}>
                {item.createTime} {item.relatedBillTypeDesc}
              </Text>
            </View>
            <Text style={styles.text}>
              单号：{item.relatedBillType == 'O' ? item.externalBillNo : item.relatedBillNo}
            </Text>
            <Text style={styles.text}>
              {item.warehouseName}{item.relatedBillType == 'O' && ` - 发往 - ${item.toWarehouseName == null ? '' : item.toWarehouseName}`}
            </Text>
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              {/* {item.stockMaterialDtos && item.stockMaterialDtos.map((data, index) => (<ListItemImage item={data} key={index} />))} */}
              {item.stockMaterialDtos && item.stockMaterialDtos.map((data, index) => {
                if (index <= 10) {
                  return (<ListItemImage item={data} key={index} />);
                }
                return null;
              })}
            </ScrollView>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    marginLeft: 8,
    marginRight: 8,
    marginBottom: 4,
    marginTop: 4,
    padding: 8,
    backgroundColor: 'white',
    borderRadius: 8,
  },
  title_container: {
    flexDirection: 'column',
  },
  title: {
    color: Theme.myPrimary,
    marginBottom: 4,
    fontSize: 15,
  },
  text: {
    color: Theme.myPrimary,
    marginBottom: 4,
    fontSize: 14,
  },
});

export default ListItem;
